<template>
    <u-popup
        v-model="isShow"
        :closeable="true"
        mode="center"
        :maskCloseAble="false"
        border-radius="20"
    >
        <view class="px-[50rpx] py-[40rpx] bg-white" style="width: 85vw">
            <u-form>
                <view class="text-center">修改昵称</view>
                <u-form-item borderBottom>
                    <u-input v-model="form.nickname" placeholder="请输入昵称" />
                </u-form-item>
                <view class="mt-[80rpx]">
                    <u-button class="btn-cyan" shape="circle" hover-class="none" :loading="btnLoading" @click="submitForm"> 确定 </u-button>
                </view>
            </u-form> 
        </view>
    </u-popup>
</template>
<script setup lang="ts">
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['confirm']);
const isShow = ref(false);
let form = reactive({
    userId: null,
    username: null,
    nickname: '',
});
let btnLoading = ref(false);
const init = (row) => {
    proxy.$util.resetForm(form, row);
    isShow.value = true;
};
const submitForm = () => {
    if(!form.nickname){
        uni.$u.toast('请填写昵称！');
        return;
    }
    btnLoading.value = true;
    appStore.editUserInfo(form).then(res => {
        uni.$u.toast('修改成功');
        btnLoading.value = false;
        emit('confirm');
    }).catch(error => {
        btnLoading.value = false;
    })
}
defineExpose({
  init,
})
</script>